<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="map">
          <div id="container" style="height: 550px"></div>

        </div>
      </el-col>

      <el-col :span="24">

        <div style="margin-top: 20px;text-align: center">
          <el-button type="success" @click="startAnimation()">开始动画</el-button>
          <el-button type="warning" @click="pauseAnimation()">暂停动画</el-button>

          <el-button type="primary" @click="resumeAnimation()">继续动画</el-button>
          <el-button type="danger" @click="stopAnimation()">停止动画</el-button>
          <el-date-picker
              style="float: right"
              v-model="dateValue"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import esRequest from "@/utils/esrequst";

export default {
  data() {
    return {
      marker: null,

      polyline: null,

      dateValue: new Date()
    };
  },
  watch: {
    dateValue() {
      console.info(this.dateValue)

      //2023/12/05
      this.setMap()
    }
  },
  async mounted() {
    let d = this.$route.query.date
    if (d) {
      this.dateValue = new Date(d)
      console.info(this.dateValue)
    }
    this.setMap()


  },
  methods: {
    async setMap() {
      let date = this.dateValue;
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, '0');
      let day = date.getDate().toString().padStart(2, '0');
      let d = `${year}/${month}/${day}`;

      const response = await esRequest('gyhat02/_search', 'post', {
        "query": {
          "bool": {
            "must": [
              {
                "match": {
                  "userId.keyword": {
                    "query": this.$route.query.userId
                  }
                }
              },
              {
                "range": {
                  "date": {
                    "gte": d + " 00:00:00",
                    "lte": d + " 23:59:00"
                  }
                }
              }
            ]
          }
        },
        "sort": [
          {
            "date": {
              "order": "ASC"
            }
          }
        ],
        "size": "10000",
        "from": "0"
      });
      if (response.hits.hits.length == 0) {
        this.$message.error("今天该员工休假")
        return
      }
      let lineArr = response.hits.hits.map(hit => ([
        hit._source.longitude, hit._source.latitude
      ]));

      this.polyline = lineArr;
      AMap.plugin('AMap.MoveAnimation', () => {

        var map = new AMap.Map("container", {
          resizeEnable: true,
          center: lineArr[0],
          zoom: 17
        });

        this.marker = new AMap.Marker({
          map: map,
          position: lineArr[0],
          icon: "http://www.icosky.com/icon/32/System/Xi4Dox/helmet.png",
          offset: new AMap.Pixel(-13, -26),
        });

        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: map,
          path: lineArr,
          showDir: true,
          strokeColor: "#28F",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
          map: map,
          strokeColor: "#AF5",  //线颜色
          strokeWeight: 6,      //线宽
        });


        this.marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
          map.setCenter(e.target.getPosition(), true)
        });

        map.setFitView();


      })
    },
    startAnimation() {
      this.marker.moveAlong(this.polyline, {
        // 每一段的时长
        duration: 500,//可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: true,
      });
    },


    pauseAnimation() {
      this.marker.pauseMove();
    },

    resumeAnimation() {
      this.marker.resumeMove();
    },

    stopAnimation() {
      this.marker.stopMove();
    }
  },


};

</script>

<style scoped>
/deep/
.el-calendar-table .el-calendar-day {
  height: 50px;
}
</style>